<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link rel="stylesheet" th:href="@{/frontstatic/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/global.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/frontstatic/css/styles.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script th:src="@{/frontstatic/fronJS/index.js}"></script>
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script th:src="@{/js/template-web.js}"></script>
    <title>主页</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>

<div style="height: 40px;width: 100%;background-color: #e2e1e1;line-height: 40px;" th:if="${session.member!=null}">
    <div th:if="${session.member.name==''}" style="text-align:center;margin:0 auto;">
        <span  th:text="${session.member.phone}"></span>
        欢迎来到云上商城
    </div>

    <div  th:if="${session.member.name!=''}"style="text-align:center;margin:0 auto;">
        <span  th:text="${session.member.name}"></span>
        欢迎来到云上商城
    </div>
</div>
<!-- 搜索栏 -->
<!--<div th:replace="~{head::headone}"></div>-->
<!--<div class="htmleaf-container">-->
<!--    <div class="header-wrap">-->
<!--        <div class="navwrap"></div>-->
<!--    </div>-->
<!--</div>-->
<!-- 顶部轮播 -->
<!--<div class="swiper-container banner-box">-->
<div class="layui-carousel" id="test10" style="margin-left: 205px;margin-top: 20px">
    <div carousel-item="" id="indexImage"></div>
</div>

<!--</div>-->

<!-- 楼层内容 -->
<div class="content inner" id="textsection" style="width: 92%">
    <section class="scroll-floor floor-1">

    </section>
</div>

<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</div>
</body>
<script id="indexddress" type="text/template">
    {{each datebatekind value}}
    <section class="scroll-floor floor-1" style="margin-top: 90px">
        <div class="floor-title" style="background-color: #FFFFFF;border-radius: 5px;border-bottom: 1px solid rgba(255,103,0,0.56)">
            {{value.name}}
            <a href="/skippage?url=item_category&id={{value.id}}" style="float: right;color: #0f0f0f;font-size: 8px">查看更多</a>
        </div>
        <div class="con-box" id="commtitydressdata">
            <a class="left-img hot-img" href="/skippage?url=item_category&id={{value.id}}">
                <img src="{{@value.image}}" alt="" class="cover">
            </a>
            <div class="right-box" id="dress" style="width: 80%;height: auto">
                {{each value.commodityList value2}}
                <a href="/skipcommtotyitem?id={{value2.id}}" class="floor-item">
                    <div class="item-img hot-img">
                        <img src="{{value2.exampleImage1}}" alt="{{value2.name}}" class="cover">
                    </div>
                    <div style="width: 100%;height: 20px;color: #0f0f0f;text-align: center;font-size: 15px">
                        <span>{{value2.name}}</span>
                    </div>
                    <div style="width: 100%;height: 20px;color: #bbbbba;text-align: center;font-size: 5px;margin-top: 5px">
                        <span>{{value2.brandName}}</span>
                    </div>
                    <div style="width: 100%;height: 20px;color: #FF6700;text-align: center;font-size: 15px;margin-top: 5px">
                        <span>{{value2.price}}元起</span>
                    </div>
                </a>
                {{/each}}
            </div>
        </div>
    </section>
    {{/each}}
</script>
<script id="indeximageTemplate" type="text/template">
    {{if datavalue.image1!=""}}
        <div><img src="{{datavalue.image1}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
    {{if datavalue.image2!=""}}
    <div><img src="{{datavalue.image2}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
    {{if datavalue.image3!=""}}
    <div><img src="{{datavalue.image3}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
    {{if datavalue.image4!=""}}
    <div><img src="{{datavalue.image4}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
    {{if datavalue.image5!=""}}
    <div><img src="{{datavalue.image5}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
    {{if datavalue.image6!=""}}
    <div><img src="{{datavalue.image6}}"width="100%" height="100%" style="display:block"/></div>
    {{/if}}
</script>
<script>
    function iphone() {
        $.post("/getCommtityData", function (result) {
            date = {datebatekind: result.data}
            mera = template("indexddress", date);
            $("#textsection").append(mera);
        })
    }
    iphone();
    function toindex(obj) {
        $.get("/skipcommtotyitem", {"id": $(obj).attr('id')}, function (data) {
            window.location.href = "item_show";
        })
    }
    $.get("/image/getList",function(ex) {
      if (ex.code==0) {
          date = {datavalue: ex.data}
          mera = template("indeximageTemplate", date);
          $("#indexImage").append(mera);

          layui.use(['carousel', 'form'], function(){
              var carousel = layui.carousel
                  ,form = layui.form;
              //图片轮播
              carousel.render({
                  elem: '#test10'
                  ,width: '80%' //设置容器宽度
                  ,height: '600px'
                  ,interval: 2000
              });

              //事件
              carousel.on('change(test4)', function(res){
                  console.log(res)
              });

              var $ = layui.$, active = {
                  set: function(othis){
                      var THIS = 'layui-bg-normal'
                          ,key = othis.data('key')
                          ,options = {};

                      othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                      options[key] = othis.data('value');
                      ins3.reload(options);
                  }
              };

              //监听开关
              form.on('switch(autoplay)', function(){
                  ins3.reload({
                      autoplay: this.checked
                  });
              });

              $('.demoSet').on('keyup', function(){
                  var value = this.value
                      ,options = {};
                  if(!/^\d+$/.test(value)) return;
                  options[this.name] = value;
                  ins3.reload(options);
              });
              //其它示例
              $('.demoTest .layui-btn').on('click', function(){
                  var othis = $(this), type = othis.data('type');
                  active[type] ? active[type].call(this, othis) : '';
              });
          });
      }
    })

</script>
</html>
